<template>
  <div class='case-wrapper'>
    <div class='title-wrapper' v-if='title'>
      <div class='left-icon'></div>
      <div class='title'>{{ title }}</div>
      <div class='right-icon'></div>
      <div class='end-icon'></div>
    </div>
    <div class='content-wrapper'>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'case',
  props: {
    title: {
      type: [String, Boolean],
      default: ''
    }

  }
}
</script>

<style scoped lang='less'>
.case-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 5px;

  .title-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    border: 1px solid teal;
    flex-shrink: 0;

    & > * {
      flex: 1;
      height: 100%;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background-image: linear-gradient(180deg, #1EC6EF, #1EC6EF, #1EC6EF, #000D2B);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      font-weight: bold;
      font-size: 0.8vw;
    }

    .right-icon {
      background: url(~@/assets/bigscreen/case-title-right.png) no-repeat;
      background-size: inherit;
      background-position: center center;
      background-repeat: no-repeat;
    }
  }

  .content-wrapper {
    flex-grow: 1;
    width: 100%;
    background: url(~@/assets/bigscreen/case-border.png) no-repeat;
    background-size: calc(100% + 2.5vw) calc(100% + 2.5vw);
    background-position: center center;
    background-repeat: no-repeat;
  }
}
</style>